<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>分类</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/sort.css">
    <script type="text/javascript" src="js/winResponsive.js"></script>
</head>
<body>
<header>
    <div class="container">
        <a href="" class="logo">
            <img src="images/index/logo.png" alt="">
        </a>
        <form action="" class="search">
            <img src="images/index/search.png" height="37" width="38"/>
            <input type="text" placeholder="输入商家，分类或商圈">
        </form>
        <a href="" class="sm">
            <img src="images/index/sys.png" alt="">
        </a> <a href="" class="l">
        <img src="images/index/l.png" alt="">
    </a>
    </div>
</header>
<section class="content">
    <section class="content-left">
        <ul class="zebra">
            <li><a href="">优选水果</a></li>
            <li><a href="">卤味熟食</a></li>
            <li><a href="">优选水果1</a></li>
            <li><a href="">卤味熟食1</a></li>
            <li><a href="">优选水果2</a></li>
            <li><a href="">卤味熟食2</a></li>
            <li><a href="">优选水果3</a></li>
            <li><a href="">卤味熟食3</a></li>
            <li><a href="">优选水果4</a></li>
            <li><a href="">卤味熟食4</a></li>
            <li><a href="">优选水果5</a></li>
            <li><a href="">卤味熟食5</a></li>
        </ul>
    </section>
    <section class="content-right">
        <ul>
            <li id="zhongyao">
                <h3>优选水果</h3>
                <ul>
                    <li>
                        <a href=""> <img src="images/sort/add.png" class="circle"/></a>
                        <img src="images/sort/peach.png" height="122" width="168"/>
                        <div class="right">
                            <p class="jx">精选</p>
                            <p class="jj">爱鲜蜂-佳沛绿奇异果</p>
                            <p class="myzy clear">买一赠一</p>
                            <p class="price">3粒/盒</p>
                            <p class="yen">&yen;16.9</p>
                        </div>
                    </li>
                    <li>
                        <a href=""> <img src="images/sort/add.png" class="circle"/></a>
                        <img src="images/sort/peach.png" height="122" width="168"/>
                        <div class="right">
                            <p class="jx">精选</p>
                            <p class="jj">爱鲜蜂-佳沛绿奇异果</p>
                            <p class="myzy clear">买一赠一</p>
                            <p class="price">3粒/盒</p>
                            <p class="yen">&yen;16.9</p>
                        </div>
                    </li>
                    <li>
                        <a href=""> <img src="images/sort/add.png" class="circle"/></a>
                        <img src="images/sort/peach.png" height="122" width="168"/>
                        <div class="right">
                            <p class="jx">精选</p>
                            <p class="jj">爱鲜蜂-佳沛绿奇异果</p>
                            <p class="myzy clear">买一赠一</p>
                            <p class="price">3粒/盒</p>
                            <p class="yen">&yen;16.9</p>
                        </div>
                    </li>
                    <li>
                        <a href=""> <img src="images/sort/add.png" class="circle"/></a>
                        <img src="images/sort/peach.png" height="122" width="168"/>
                        <div class="right">
                            <p class="jx">精选</p>
                            <p class="jj">爱鲜蜂-佳沛绿奇异果</p>
                            <p class="myzy clear">买一赠一</p>
                            <p class="price">3粒/盒</p>
                            <p class="yen">&yen;16.9</p>
                        </div>
                    </li>
                    <li>
                        <a href=""> <img src="images/sort/add.png" class="circle"/></a>
                        <img src="images/sort/peach.png" height="122" width="168"/>
                        <div class="right">
                            <p class="jx">精选</p>
                            <p class="jj">爱鲜蜂-佳沛绿奇异果</p>
                            <p class="myzy clear">买一赠一</p>
                            <p class="price">3粒/盒</p>
                            <p class="yen">&yen;16.9</p>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</section>
<footer>
    <nav class="container">
        <a href="" class="home">
            <img src="images/index/sy.png" alt="">
            <p>首页</p>
        </a>
        <a href="">
            <img src="images/index/ss.png" alt="">
            <p>闪送超市</p>
        </a>
        <a href="">
            <img src="images/index/wd.png" alt="">
            <p>我的</p>
        </a>
        <a href="">
            <img src="images/index/gwc.png" alt="">
            <p>&yen;0起送</p>
        </a>
    </nav>
</footer>
<!-- <script type="text/javascript">
    var lis=document.querySelectorAll('.zebra li');
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = 'red';
            
        };
        lis[i].index = i;
        lis[i].onmouseout = function () {
            if (this.index % 2 == 0) {
                this.style.backgroundColor = '#ccc';
            } else {
                this.style.backgroundColor = '';
            }
        };
        //设置静态斑马线
        if (i % 2 == 0) {
            lis[i].style.backgroundColor = '#ccc';
        }
    }
    </script> -->
   
<script type="text/javascript" src="../../js/jquery.js"></script>

<!-- jq实现 -->
<script type="text/javascript">
    var lis=$('.zebra li');
    lis.mouseover(function(){
       $(this).css('background-color','skyblue')
       
    })
     lis.mouseout(function(){
       $(this).css('background-color','')
         if ($(this).index('.zebra li')%2==0) {
            lis.eq($(this).index('.zebra li')).css('background-color','#ccc')
        }
    })
    // 设置静态斑马线
    for(var j=0;j<lis.length;j++){

        if (j%2==0) {
            lis.eq(j).css('background-color','#ccc')
        }
    }
</script>
</script>
</body>
</html>